var canvas_h = null            //cavans
var ctx_h = null           //节点

var wid_h = null          // 宽度

var hei_h = null                    // 高度

var x_h = 0        // width

var y_h = 0;      // height

var start_width = null;  // 开始宽度
var start_height = null; // 开始高度
var index_h = 0
 
var breathRate = {
     
  start_herat(res_h){
    let that = this;
    canvas_h = res_h[0].node                 // canvas就是我们要操作的画布节点
    ctx_h = canvas_h.getContext('2d')        // 以2d模式，获取一个画布节点的上下文对象
    
    // 不加这段，矩形底部会显示不全，我还没看懂
    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas_h.width = res_h[0].width * dpr
    canvas_h.height = res_h[0].height * dpr
    ctx_h.scale(dpr, dpr);

    wid_h = res_h[0].width;
    hei_h = res_h[0].height;
    x_h = 0;
    y_h = res_h[0].height/2;

    start_width = res_h[0].width;
    start_height = res_h[0].height;


    that.draw_canvs(res_h);
    that.draw_line();

    // 画个矩形运动
    clearInterval(index_h)
    index_h = setInterval(()=>{
      that.move_h(res_h);
    },20)
  },

  //创建画布
  draw_canvs(res_h){
    let that = this;
    ctx_h.fillStyle = '#3bccb7';
    ctx_h.fillRect(0, 0,res_h[0].width,res_h[0].height);
    
    ctx_h.strokeStyle = '#eade20';     //设置画笔颜色
    ctx_h.lineJoin = 'round';          //设置画笔轨迹基于圆点拼接
    ctx_h.lineWidth = 2;               //设置画笔粗细
  },

  //画曲线
  draw_line(){
    let that = this;
    ctx_h.beginPath();                 //开始一条画笔的路径
    ctx_h.moveTo(x_h,y_h);   //定位起点
    ctx_h.arcTo(30, 0, 70, 50, 30);
    ctx_h.lineTo(70, 50);
    ctx_h.stroke();

    ctx_h.beginPath();                 //开始一条画笔的路径
    ctx_h.moveTo(70,50);               //定位起点
    ctx_h.arcTo(110, 100, 150, 50, 30);
    ctx_h.lineTo(150, 50);
    ctx_h.stroke();

    ctx_h.beginPath();                 //开始一条画笔的路径
    ctx_h.moveTo(170,50);              //定位起点
    ctx_h.lineTo(240, 50);
    ctx_h.stroke();

    ctx_h.beginPath();                 //开始一条画笔的路径
    ctx_h.moveTo(260,50);              //定位起点
    ctx_h.arcTo(290, 0, 310, 10, 20);
    ctx_h.lineTo(310, 10);
    ctx_h.stroke();

    ctx_h.beginPath();                 //开始一条画笔的路径
    ctx_h.moveTo(310,50);              //定位起点
    ctx_h.lineTo(330, 50);
    ctx_h.stroke();

    
    ctx_h.beginPath();
    ctx_h.moveTo(350,50);
    ctx_h.arcTo(370,100,390,50,30);
    ctx_h.lineTo(390,50);
    ctx_h.stroke();
  
  },


  move_h(res_h){
    let that = this;
    x_h++;
    
    if(x_h >= start_width){
      ctx_h.closePath();
      clearInterval(index_h);
      ctx_h.clearRect(0,0,start_width,start_height);
      index_h = 0;
      x_h = 0;
      that.start_herat(res_h);
    }

    ctx_h.rect(x_h,0,10,start_height);
    ctx_h.fillStyle = '#3bccb7';
    ctx_h.fill();

    // ctx_h.clearRect(that.x_h,0,10,that.start_height);
    // that.start_herat()

  }

}

module.exports = breathRate;